<template>
    <el-row>
        <el-row :getter="20">
            <el-col>
                <el-button type="primary" size="mini" style="width: 80px;" @click="add()">新增</el-button>
                <el-button type="primary" size="mini" style="width: 80px;" @click="add(id)">编辑</el-button>
            </el-col>
        </el-row>
        <el-row :getter="20">
            <el-dialog :title="a==2 ? '编辑' : '新增'" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="活动名称" :label-width="formLabelWidth">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="活动区域" :label-width="formLabelWidth">
                        <el-select v-model="regions" placeholder="请选择活动区域">
                            <el-option
                                v-for="item in form.region"
                                :key="item.value"
                                :value="item.value"
                                :label="item.label"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addEdit">确 定</el-button>
                </div>
            </el-dialog>
        </el-row>
    </el-row>
</template>
<script>
export default {
  data() {
    return {
      title: '',
      dialogFormVisible: false,
      formLabelWidth: '120px',
      regions: '',
      id: 'id',
      a: '',
      form: {
        name: '',
        region: [{
          value: '1',
          label: '北京'
        }, {
          value: '2',
          label: '南京'
        }]
      }
    }
  },
  methods: {
    add(id) {
      if (id) {
        this.dialogFormVisible = true;
        this.form.name = '这是编辑的弹框';
        this.regions = '北京';
        console.log(id)
        this.a = 2;
      } else {
        this.dialogFormVisible = true;
        console.log(id)
        this.a = 3;
      }
    },
    new() {
      console.log('这是新增按钮')
    },
    edit() {
      console.log('这是编辑按钮');
    },
    addEdit() {
      if (this.a === 2) {
        //                    console.log('这是新增页面')
        this.edit();
        this.dialogFormVisible = false;
        this.form.name = '';
        this.regions = '';
      } else {
        this.new();
        //                    console.log('这是编辑页面')
        this.dialogFormVisible = false;
        this.form.name = '';
        this.regions = '';
      }
    }
  }
}
</script>
<style>

</style>
